<template>
    <div class="distributionRulebox">
        <h5>Distribution proportion of advertising rewards for UV traffic contributors (100%)</h5>
        <div class="inputLists">
            <div class="setInput">
                <input type="number" v-model="frormData.adOwnerAward" placeholder="Advertising space holder"/>
                <span>%</span>
            </div>
            <div class="setInput">
                <input type="number" v-model="frormData.adLandmarkOwnerAward" placeholder="Landmark holder"/>
                <span>%</span>
            </div>
            <div class="setInput">
                <input type="number" v-model="frormData.adVisitAward" placeholder="Traffic contributors"/>
                <span>%</span>
            </div>
        </div>
        <div class="inputLists">
            <div class="setInput">
                <input type="number" v-model="frormData.adDaoOwnerAward" placeholder="Dao Creator"/>
                <span>%</span>
            </div>
            <div class="setInput">
                <input type="number" v-model="frormData.adDaoMemberAward" placeholder="Dao member"/>
                <span>%</span>
            </div>
            <div class="setInput setInput2">
                <input type="number" disabled v-model="frormData.adCollextAward" placeholder="Collext Commission"/>
                <span>%</span>
            </div>
        </div>
        <div class="btn">
            <my-button text='confirm' @click="doset"/>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import { toast} from '@/utils/common'
export default {
    components:{
       myButton
    },
    props:{
        ruleDetail:{
            type:Object,
            default:()=>{}
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            frormData:{
                adCollextAward:10,
                adDaoMemberAward:'',
                adDaoOwnerAward:'',
                adLandmarkOwnerAward:'',
                adOwnerAward:'',
                adVisitAward:'',
                arLandmarkId:''
            },
            
        })

        onMounted(()=>{
            state.frormData.arLandmarkId = parseInt(route.query.arlandmarkid)
            Object.assign(state.frormData,props.ruleDetail)
            if(!state.frormData.adCollextAward){
                frormData.adCollextAward = 10
            }
        })

        const doset = async()=>{
            if(!state.frormData.adOwnerAward){
                return toast('Please enter the reward for advertising space holders')
            }else if(!state.frormData.adLandmarkOwnerAward){
                return toast('Please enter landmark holder reward')
            }else if(!state.frormData.adVisitAward){
                return toast('Please enter the reward for traffic contributors')
            }else if(!state.frormData.adDaoOwnerAward){
                return toast('Please enter Dao creator reward')
            }else if(!state.frormData.adDaoMemberAward){
                return toast('Please enter Dao member reward')
            }else if(!state.frormData.adCollextAward){
                return toast('Please enter the collext Commission')
            }
            const res = await store.dispatch('ad/set_ads_award',state.frormData)
            if(res.success){
                toast('Setting succeeded')
                setTimeout(()=>{context.emit('close')},1000)
            }else{
                toast(res.message)
            }
        }

        return{
            ...toRefs(state),
            doset
        }
    }
}
</script>

<style lang="scss" scoped>
    .distributionRulebox{
        width: 1400px;
        height: 650px;
        padding: 20px;
        h5{
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 30px;
            line-height: normal;
            padding: 50px 0 20px 0;
        }
        .inputLists{
            display: flex;
            width: 100%;
            overflow: hidden;
            margin: 50px 0;
            .setInput{
                display: flex;
                flex: 1;
                height: 80px;
                line-height: 80px;
                background: rgba(103,248,255,0.2000);
                border-radius: 0px 0px 0px 0px;
                border: 1px solid rgba(103,248,255,0.5000);
                font-family: Inter-Medium, Inter;
                font-weight: 500;
                color: #FFFFFF;
                font-size: 28px;
                flex-shrink: 0;
                &.setInput2{
                    border: 1px solid rgba(103,248,255,0.2000); 
                }
                &+.setInput{
                    margin-left: 20px;
                }
                input{
                    flex: 1;
                    border: 0;
                    padding: 0 20px;
                    background: none;
                    line-height: 80px;
                    color: #B3D8EB;
                    width: 100%;
                }
                span{
                    padding: 0 20px;
                    height: 100%;
                }
            }
        }
        .btn{
            width: 450px;
            margin: 80px auto 20px auto;
        }
    }
</style>